<template>
  <el-card class="box-card">
    <template #header>
      <span>患者打卡率</span>
    </template>
    <div ref="chartRef" :style="{ width: width, height: height }"></div>
  </el-card>
</template>
<script lang="ts" setup>
  import { onMounted, Ref, ref, watch } from 'vue'
  import { useECharts } from '@/hooks/web/useECharts'
  import type { EChartsOption } from 'echarts'

  const animationDuration = 300
  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions, getInstance } = useECharts(
    chartRef as Ref<HTMLDivElement>,
    'macarons'
  )

  const props = defineProps({
    data: {
      type: Object,
      default() {
        return {}
      },
    },
    width: {
      // eslint-disable-next-line no-undef
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      // eslint-disable-next-line no-undef
      type: String as PropType<string>,
      default: '300px',
    },
    customStyle: {
      // '' :'shadow'
      type: Object,
      default() {
        return {
          isBarShadow: null,
          axisLabelColor: 'gray',
        }
      },
    },
    customConfig: {
      type: Object,
      default: {
        formatterUnit: null,
      },
    },
  })

  watch(
    () => props.data,
    () => {
      if (props.data) {
        const { xAxisData, yAxisData, data } = props.data
        const { isBarShadow, axisLabelColor } = props.customStyle
        console.log('axisLabelColor =' + axisLabelColor)
        const { formatterUnit } = props.customStyle
        const seriesDataTmp = {
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(255,255,255,0.8)',
            axisPointer: {
              type: isBarShadow ? '' : 'shadow',
            },
            formatter: (params: any) => {
              if (
                Object.prototype.toString.call(params[0].data) ===
                '[object Object]'
              ) {
                return (
                  params[0].data.id +
                  '<br/>' +
                  params[0].marker +
                  ' ' +
                  params[0].data.id +
                  ' 共' +
                  params[0].data.value +
                  formatterUnit
                )
              } else {
                return (
                  params[0].name +
                  '<br/>' +
                  params[0].marker +
                  ' ' +
                  params[0].name +
                  ' 共' +
                  params[0].value +
                  '人'
                )
              }
            },
          },
          // 控制上下左右边距的
          grid: {
            left: '2%',
            right: '5%',
            bottom: '5%',
            top: '10%',
            containLabel: true,
          },
          // 不是横坐标
          xAxis: {
            type: xAxisData ? 'category' : 'value',
            data: xAxisData,
            axisLabel: {
              interval: 0, // 强制显示完整
              rotate: -20, //倾斜度 -90 至 90 默认为0
              fontSize: 11,
              color: axisLabelColor,
            },
          },
          yAxis: {
            type: yAxisData ? 'category' : 'value',
            data: yAxisData,
            axisLabel: {
              interval: 0, // 强制显示完整
              // rotate: -20,//倾斜度 -90 至 90 默认为0
              fontSize: 11,
              color: axisLabelColor,
            },
          },
          series: [
            {
              cursor: isBarShadow ? 'default' : '', // 不显示小手
              name: '数量',
              type: 'bar',
              stack: 'vistors',
              barWidth: '60%',
              data: data,
              animationDuration,
            },
          ],
        }
        setOptions(seriesDataTmp as EChartsOption)
      }
    },
    { immediate: true }
  )
  onMounted(() => {
    const myChart = getInstance()
    console.log('myChart =' + myChart)
    myChart?.on('click', function (params) {
      const { data, dataIndex } = params
      console.log('data =' + JSON.stringify(data))
      console.log('dataIndex =' + JSON.stringify(dataIndex))
    })
  })
</script>
<style lang="scss" scoped>
  .box-card {
    // width: 50%;
    margin-bottom: 22px;
  }
</style>
